<template>
	<view class="quick-page">
		<!-- <u-navbar title="用户登录" :background="background" back-icon-color="#fff" title-color="#fff"></u-navbar> -->
		<view class="quick-top">
			<view class="quick-swiper-box" v-if="loginAdvList.length>0">
				<view class="quick-swiper">
					<u-swiper :list="loginAdvList" img-mode="scaleToFill" height="400"  border-radius="0"></u-swiper>
				</view>
			</view>
			<!-- <u-image width="100%" height="400rpx" src="https://cdn.uviewui.com/uview/swiper/1.jpg" ></u-image> -->
		</view>
		<view class="quick-logo">
			<u-image width="176rpx" height="176rpx" src="@/static/images/wx.png" ></u-image>
		</view>
		<view class="quick-btn-box">
			<!-- <button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">登录</button> -->
			<view class="quick-btn login-register" @click="goLogin">登录/注册</view>
			<!-- #ifdef MP-WEIXIN -->
			<u-button :loading="loading" :disabled="loading" :custom-style="customStyle" class="quick-btn wx-quick" open-type="getPhoneNumber" @getphonenumber="bindPhone">微信手机号快捷登录</u-button>
			<!-- #endif -->
		</view>
		<view class="quick-bottom">
			若您的微信手机号未注册，将为您自动注册，注册或登录即代表您同意 药零通微商城用户协议（含隐私政策）
		</view>
		<u-mask :show="showMask" z-index="998">
			<view class="maskContent">
				<!-- #ifdef MP-WEIXIN -->
				<view class="maskTitle">提示</view>
				<view class="maskWords">获取您的微信昵称、头像等信息</view>
				<view class="maskBtnBox">
					<view class="maskBtn maskBtnCancle" @click="goHome">取消</view>
					<view class="maskBtn maskBtnSure">
						<!-- <u-button :loading="userLoading" :disabled="userLoading" :custom-style="userCustomStyle" class="user-btn" open-type="getUserInfo" @getuserinfo="loginMP">同意</u-button> -->
						<u-button :loading="userLoading" :disabled="userLoading" :custom-style="userCustomStyle" class="user-btn"  @click="loginMP">同意</u-button>
					
					</view>
				</view>
				<!-- #endif -->
			</view>
		</u-mask>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	export default {
		data() {
			return {
				code:'',
				customStyle: {
					height:'96rpx',
					borderRadius: '122rpx',
					fontSize: '36rpx',
					lineHeight: '96rpx',
					textAlign: 'center',
					color:'#fff',
					backgroundColor: '#00CBCB'
				},
				title: 'Hello',
				background: {
					backgroundColor: '#0D95FF',
				},
				loading:false,
				showMask:false,
				userLoading:false,
				userCustomStyle:{
					height:'80rpx',
					borderRadius: '8rpx',
					width:'180rpx',
					fontSize: '34rpx',
					lineHeight: '80rpx',
					textAlign: 'center',
					color:'#fff',
					backgroundColor: '#00CBCB'
				},
			}
		},
		onLoad() {
			this.getLoginAdv()
			// uni.authorize({
			// 	scope:"scope.scope.userInfo",
			// 	success(res) {
			// 		console.log(res);
			// 	},
			// 	fail() {
			// 		uni.openSetting({
			// 			success(authSetting) {
			// 				console.log(authSetting);
			// 			}
			// 		})
			// 	}
			// })
			// #ifdef MP-WEIXIN
				// uni.getUserInfo({
				// 	provider: 'weixin',
				// 	success: function(infoRes) {
				// 		console.log('-------获取微信用户所有-----')
				// 		console.log(JSON.stringify(infoRes.userInfo));
				// 	}
				// });
			// #endif
			
		},
		computed:{
			...mapState({
				loginAdvList: state => state.shop.loginAdvList
			})
		},
		onShow() {
			
			
		},
		methods: {
			...mapActions(['ActLoginWx','ActGetStoreAdvList','ActChangeMemberBaseInfo']),
			goLogin(){
				this.$u.route({
					url: 'pages/user/phone'
				})	
			},
			async getLoginAdv(){
				await this.ActGetStoreAdvList({storeId:0,apKey:'advLogin'})
			},
			// 绑定手机号码
			async bindPhone(e) {
				this.loading = true
				let _this = this
				console.log('e',e)
				if (e.detail.iv) {
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							_this.code = loginRes.code;
							let param = {
								"iv": e.detail.iv,
								"encryptedData": e.detail.encryptedData,
								code: _this.code,
								grant_type: 'wechatApp',
								scope: 'all',
								tenantId: '000',
							}
							_this.login(param)
							
						},
					})
					// #endif
				} else{
					this.loading = false
				}
				
			},
			async login(param){
				const res = await this.ActLoginWx(param);
				if (res.access_token) {
					// #ifdef MP
					//如果是小程序  例如显示返回按钮
					this.showMask = true
					// #endIf
					// #ifdef H5
					this.$u.route({
						url: 'pages/index/home',
						type:'reLaunch'
					})
					// #endIf
					
				}
			},
			loginMP(){
				let _this = this
				this.userLoading = true
				// uni.getUserInfo({
				// 	provider:"weixin",
				// 	 success:async(userInfo)=> {
				// 		uni.setStorageSync('wxUserInfo',userInfo.userInfo);
				// 		console.log("userInfo",userInfo.userInfo)
				// 		 const reqBody = {
				// 			memberAvatar:userInfo.userInfo.avatarUrl,
				// 			memberBirthday:'',
				// 			memberName:userInfo.userInfo.nickName,
				// 			memberSex:userInfo.userInfo.gender
				// 		}
				// 		console.log("reqbody",reqBody)
				// 		await this.ActChangeMemberBaseInfo(reqBody)
				// 	},
				// 	fail: function () {
				// 		uni.showToast({
				// 			title: '用户信息获取失败'
				// 		});
				// 	},
				// 	complete: function () {
				// 		_this.userLoading = false
				// 		_this.$u.route({
				// 			url: 'pages/index/home',
				// 			type:'reLaunch'
				// 		})
				// 	}
				// })
				wx.getUserProfile({
					desc:'登录',
					success:async(userInfo)=>{
						uni.setStorageSync('wxUserInfo',userInfo.userInfo);
						console.log("userInfo.userInfo",userInfo.userInfo)
						 const reqBody = {
							memberAvatar:userInfo.userInfo.avatarUrl,
							memberBirthday:'',
							memberName:userInfo.userInfo.nickName,
							memberSex:userInfo.userInfo.gender
						}
						await this.ActChangeMemberBaseInfo(reqBody)
					},
					fail:(res)=>{
						uni.showToast({
							title: '用户信息获取失败'
						});
					},
					complete:function(){
						_this.userLoading = false
						_this.$u.route({
							url: 'pages/index/home',
							type:'reLaunch'
						})
					}
				})
			},
			goHome(){
				this.$u.route({
					url: 'pages/index/home',
					type:'reLaunch'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quick-page{
		background: #F6F6F6;
		.maskContent{
			width:550rpx;
			margin:0 auto;
			margin-top: 50%;
			background-color: #fff;
			border-radius: 18rpx;
			padding:30rpx 0;
			.maskTitle{
				color:$u-main-color;
				font-size: 36rpx;
				text-align: center;
			}
			.maskWords{
				color:$u-content-color;
				font-size: 32rpx;
				text-align: center;
				margin-top:26rpx;
				margin-bottom: 30rpx;
			}
			.maskBtnBox{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				text-align: center;
				.maskBtn{
					width:180rpx;
					height:80rpx;
				}
				.maskBtnCancle{
					background: #fff;
					color:$u-type-primary;
					line-height: 80rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.quick-logo{
		width:176rpx;
		height:176rpx;
		margin:64rpx auto;
	}
	.quick-btn-box{
		width:654rpx;
		margin:0 auto;
	}
	.quick-btn{
		height:96rpx;
		border-radius: 122rpx;
		font-size: 36rpx;
		line-height: 96rpx;
		text-align: center;
	}
	.login-register{
		border: 2rpx solid $u-type-primary;
		color: $u-type-primary;
		margin-bottom: 32rpx;
	}
	.wx-quick{
		color:#fff;
		background-color: $u-type-primary;
	}
	.quick-bottom{
		position: fixed;
		bottom:20rpx;
		width:100%;
		padding:0 48rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 40rpx;
		color:#999;
	}
</style>
